<template>
  <div id="Login">
    <main>
      <span>
        <img src="../../public/images/logo.png" alt="" />
        <p>厚朴外卖总后台管理系统</p>
      </span>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            v-model="ruleForm.pass"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { fetchList, fetchLogin } from '../api/users/index'
import { useRouter } from 'vue-router'

const userDate = ref(null)

const router = useRouter()

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  username: '',
  pass: '',
})

watch(userDate, async (newVal) => {
  const res = await fetchList({
    currentPage: 1,
    pageSize: 10,
  })

  const foundUserInfo = res.data.find((ele) => ele.account === ruleForm?.username)
  localStorage.setItem('userInfo', JSON.stringify(foundUserInfo))
  localStorage.setItem('activeIndex', '/index/main')
  if (newVal.token) {
    router.push({
      path: '/index',
      query: {
        account: ruleForm.username,
        password: ruleForm.pass,
      },
    })
  }
})

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入正确的密码'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ required: true, message: '请输入正确的账号', trigger: 'blur' }],
  pass: [{ validator: validatePass, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('表单验证成功')
    } else {
      console.log('表单验证失败')
    }
  })

  const res = fetchLogin({
    account: ruleForm.username,
    password: ruleForm.pass,
  })
  res.then((res) => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    console.log(res)
    if (res.code === 0) {
      localStorage.setItem('t_k', JSON.stringify(res.token))
    }
    userDate.value = {
      role: res.role,
      token: res.token,
    }
    localStorage.setItem('user', JSON.stringify(userDate.value))
  })
}
onMounted(async () => {})
</script>

<style scoped lang="less">
#Login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: rgb(113, 143, 229);
  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    width: 500px;
    height: 300px;
    border-radius: 20px;
    background-color: white;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: auto;
      img {
        width: 30px;
      }
      p {
        font-size: 20px;
        font-weight: bold;
        margin-left: 20px;
      }
    }
    .demo-ruleForm {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .btn {
        margin-top: 20px;
        width: 300px;
      }
    }
  }
}
</style>
